<template>
  <div>
    <x-header :left-options="{showBack: true,preventGoBack:true}" @on-click-back="goBack"
              theme="" class="queryHeader">既往投保</x-header>
    <div>
      <group label-width="8em">
        <cell title="原保险人">
          <i slot="icon" class="iconfont icon-group_fill" style="color:#4A90E2;padding-right: 5px;"></i>
          <div>
            <span>{{currentData.preproposalCarp !== "" ? currentData.preproposalCarp : "暂无"}}</span>
          </div>
        </cell>
        <cell title="既往赔付率(%)">
          <i slot="icon" class="iconfont icon-homepage_fill" style="color:#ff9900;padding-right: 5px;"></i>
          <div>
            <span>{{currentData.backCliamRate !== "" ? currentData.backCliamRate + "%" : "暂无"}}</span>
          </div>
        </cell>
        <cell
          title="理赔记录"
          is-link
          :border-intent="false"
          :arrow-direction="showContent1 ? 'up' : 'down'"
          @click.native="showContent1 = !showContent1">
          <i slot="icon" class="iconfont icon-createtask_fill" style="color:#4A90E2;padding-right: 5px;"></i>
        </cell>
        <template v-if="showContent1">
          <cell-box :border-intent="false" class="sub-item">
            <p class="claimsRecords">{{currentData.claimNote !== "" ? currentData.claimNote : "暂无"}}</p>
          </cell-box>
        </template>

        <cell
          title="业务背景描述"
          is-link
          :border-intent="false"
          :arrow-direction="showContent2 ? 'up' : 'down'"
          @click.native="showContent2 = !showContent2">
          <i slot="icon" class="iconfont icon-createtask_fill" style="color:#EA5A49;padding-right: 5px;"></i>
        </cell>
        <template v-if="showContent2">
          <cell-box :border-intent="false" class="sub-item">
            <p class="claimsRecords">{{currentData.claimNote !== "" ? currentData.competePlan : "暂无"}}</p>
          </cell-box>
        </template>
      </group>
    </div>
  </div>
</template>
<script>
  import {XHeader, Group, Cell , CellBox} from 'Vux'
  export default {
    components: {
      XHeader,
      Group,
      Cell,
      CellBox
    },
    data(){
      return {
        currentData: {},
        showContent2: false,
        showContent1: false
      }
    },
    methods: {
      goBack(){
        this.$router.push({
          path:'/listDetail'
        });
        this.$store.commit('CHANGE_TRANSITION', 'right')
      }
    },
    mounted(){
      this.currentData = this.$route.query.info;
    }
  }
</script>
<style scoped>
  .claimsRecords {
    font-size: 12px;
    line-height: 22px;
    margin-bottom: 0;
    text-indent: 2em;
  }
</style>
